@import './lib/reset.styl';
@import './lib/theme.styl';

html, body {
  width: 100%;
  height: 100%;
  font-size: 16px;
}

#app {
  height: 100%;
  width: 100%;
  background: #d3def5;

  .mescroll {
    height: 100%;
  }

  .page-wrap {
    height: 100%;
    width: 100%;
  }

  header {
    width: 100%;
    height: getf(200);
    background: #f8d3b4;
  }

  .content {
    background: #d3def5;

    .content-items {
      .item {
        box-sizing: border-box;
        height: getf(106px);
        padding: getf(10);
        background: #fff;
        margin-bottom: getf(10);

        .left {
          float: left;
          width: getf(86);
          height: getf(86);

          @media screen and (max-width: 375px) {
            width: getf(70);
            height: getf(70);
          }

          // background: #fec2d1;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          height: 100%;
          width: auto;
          margin-left: getf(15);
          float: left;

          // background: #e9d3d3;
          .title {
            $text(16, #323232, 0.86);

            @media screen and (max-width: 375px) {
              $text(14, #323232);
            }
          }

          .address {
            $text(16, #7F7E7D, 0.75);

            @media screen and (max-width: 375px) {
              $text(14,#7F7E7D);
            }

            line-height: getf(37);
          }

          .price {
            $text(18, #FF5B7A, 0.84);

            @media screen and (max-width: 375px) {
              $text(16,#FF5B7A);
            }

            .original {
              $text(14, #999, 0.66);

              @media screen and (max-width: 375px) {
                $text(12,#999);
              }
            }
          }
        }
      }
    }
  }
}